<template>
  <div @click="handleClick"  v-show="show" class="returnTop-container"></div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  created() {
    this.$bus.$on("MainScroll", this.handleScroll);
  },
  destroyed() {
    this.$bus.$off("MainScroll", undefined);
  },

  methods: {
    handleScroll(dom) {
        if(!dom){
            this.show=false;
            return;
        }
      this.show = dom.scrollTop > 400 ? true : false;
    },
    handleClick(){
        //回到顶部
        this.$bus.$emit('returnTop', 0);
    }
  },
};
</script>

<style lang='less' scoped>
.returnTop-container {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background: rgba(223, 223, 224, 0.8);
  position: fixed;
  bottom: 80px;
  right: 350px;
  &::after{
    content: '';
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-bottom-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -8px;
  }
  &:hover {
    background: rgb(200, 200, 201);
  }
}
</style>